<template>
  <page-header-wrapper>
    <page-tab-list> </page-tab-list>
    <a-card :border="false">
      <a-form-model :model="formData" :rules="rules" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }" ref="form">
        <div style="width: 600px">
          <div class="title" style="padding-top: 0">广告规则</div>

          <a-form-model-item label="每日观看广告次数限制" :labelCol="{span:8}" :wrapperCol="{span: 16}" prop="see_num">
            <a-input allowClear placeholder="请输入" v-model="formData.see_num"></a-input>
          </a-form-model-item>
          <a-form-model-item label="每次观看广告获取奖金积分" :labelCol="{span:8}" :wrapperCol="{span: 16}" prop="award_integral">
            <a-input allowClear placeholder="请输入" addon-after="积分" v-model="formData.award_integral"></a-input>
          </a-form-model-item>
          <a-form-model-item label="一级佣金" prop="first_commission">
            <a-input allowClear placeholder="请输入" addon-after="%" v-model="formData.first_commission"></a-input>
          </a-form-model-item>
          <a-form-model-item label="二级佣金" prop="second_commission">
            <a-input allowClear placeholder="请输入" addon-after="%" v-model="formData.second_commission"></a-input>
          </a-form-model-item>
          <a-form-model-item label="三级佣金" prop="third_commission">
            <a-input allowClear placeholder="请输入" addon-after="%" v-model="formData.third_commission"></a-input>
          </a-form-model-item>
        </div>

        <div class="border-b"></div>

        <div style="width: 600px">
          <div class="title">广告联盟</div>
          <a-form-model-item label="广告位id" prop="adpid" extra="广告位id可传入多个，请用英文逗号分隔(,)">
            <a-input placeholder="请输入" v-model="formData.adpid"></a-input>
          </a-form-model-item>
          <a-form-model-item
            label="广告回调地址"
            prop="callback_url"
            extra="客户查看广告播放完成回调地址，用于配置uniAd广告服务器回调"
          >
            <a-button type="link" @click="copyText(callback_url)">{{ callback_url }}</a-button>
          </a-form-model-item>
        </div>
        <div class="border-b"></div>
      </a-form-model>
      <div style="margin-top: 50px">
        <a-button @click="submit" :loading="confirmLoading" type="primary">保存</a-button>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import ChartGptApi from '@/api/chartGpt'
export default {
  data() {
    return {
      confirmLoading: false,
      callback_url: '',
      formData: {},
      rules: {
        see_num: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        award_integral: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        first_commission: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        second_commission: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        third_commission: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        adpid: [
          {
            required: true,
            message: '必填项不能为空',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  created() {
    this.getSetting()
  },
  methods: {
    async getSetting() {
      const res = await ChartGptApi.adSetting({}, 'GET')
      this.formData = res.data.model
      this.callback_url = res.data.callback_url
    },
    async submit() {
      this.confirmLoading = true
      try {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const res = await ChartGptApi.adSetting(this.formData, 'POST')
            this.visible = false
            this.getSetting()
            this.$message.success('保存成功')
          }
          this.confirmLoading = false
        })
      } catch (error) {
        this.confirmLoading = false
      }
    },
    copyText(text) {
      // 创建一个新的 textarea 元素
      const textarea = document.createElement('textarea')

      // 将文本设置为 textarea 的值
      textarea.value = text

      // 将 textarea 添加到文档
      document.body.appendChild(textarea)

      // 选中 textarea 内容
      textarea.select()

      // 复制选中的文本到剪贴板
      document.execCommand('copy')

      // 移除 textarea 元素
      document.body.removeChild(textarea)

      this.$message.success('复制成功')
    },
  },
}
</script>

<style lang="scss" scoped>
.title {
  padding: 30px 0;
  padding-left: 10px;
  font-weight: 600;
  font-size: 18px;
}

.border-b {
  border-bottom: 1px solid #f5f5f5;
}
</style>
